// 侧边栏样式
.location-sidebar {
  min-width: 320px;
  max-width: 400px;
}

// 页面标题样式
.page-title {
  margin: 0;
}

// 页面描述样式
.page-description {
  margin: 0;
}

.location-content {
  height: calc(100vh - 64px - 60px - 32px) !important;
}

// 位置树拖拽图标隐藏
.location-content .draggable-tree {
  .ant-tree-draggable-icon {
    display: none !important;
  }
}

// 自定义树组件样式
.location-tree {
  .ant-tree-node-content-wrapper {
    width: 100%;

    &:hover {
      background-color: #f3f4f6;
    }

    &.ant-tree-node-selected {
      background-color: #e0f2fe;
    }
  }

  .ant-tree-title {
    width: 100%;
  }

  .ant-tree-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ant-tree-indent-unit {
    width: 20px;
  }
}

// 自定义地图标记样式
.custom-marker {
  background: linear-gradient(135deg, #0065f2 0%, #0056d6 100%);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  min-width: 80px;
  box-shadow: 0 4px 12px rgba(0, 101, 242, 0.3);
  border: 2px solid white;
  font-weight: 500;
  line-height: 1.2;

  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0065f2;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 101, 242, 0.4);
    transition: all 0.2s ease;
  }
}

// 高德地图控件样式优化
.amap-container {
  .amap-toolbar {
    background: white;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.375rem;
  }

  .amap-scale {
    background: white;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
  }

  .amap-logo {
    opacity: 0.5;
  }

  .amap-copyright {
    opacity: 0.5;
    font-size: 0.75rem;
  }
}

// 组态图完全覆盖层样式
.graph-floating-layer {
  background: #ffffff;
  // 确保组态图在地图之上但在设备绑定列表之下
  z-index: 10 !important;

  // 添加进入动画
  animation: fadeIn 0.3s ease-out;

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  // 标题栏样式
  .graph-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  // 关闭按钮样式
  .close-button {
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background-color: #fee2e2;
      color: #dc2626;
    }
  }
}

// 设备绑定列表浮动层样式
.device-bind-list {
  // 添加从右侧滑入的动画
  animation: slideInRight 0.3s ease-out;

  // 确保设备绑定列表在地图和组态图之上
  z-index: 100 !important;

  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  // 标题栏样式
  .bind-list-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  }

  // 设备项样式优化
  .device-item {
    transition: all 0.2s ease;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0;

    &:hover {
      background-color: #f8fafc;
      transform: translateX(-2px);
    }

    .device-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .device-name {
      font-weight: 500;
      font-size: 14px;
      color: #333;
      margin-right: 8px;
    }

    .device-meta {
      display: flex;
      font-size: 12px;
      color: #666;
      line-height: 1.5;

      .meta-item {
        display: flex;
        align-items: center;
        overflow: hidden;

        .meta-label {
          color: #888;
          flex-shrink: 0;
          margin-right: 4px;
        }

        .meta-value {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  // 解绑按钮样式
  .unbind-button {
    transition: all 0.2s ease;
    margin-left: 8px;
    padding: 0 8px;
    height: 24px;
    font-size: 12px;
    border-radius: 4px;

    &:hover {
      background-color: #fee2e2;
      color: #dc2626;
    }
  }

  // 空状态样式优化
  .empty-devices {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #888;

    .icon-wrapper {
      margin-bottom: 16px;
      color: #d9d9d9;
      font-size: 48px;
    }

    .empty-text {
      font-size: 14px;
    }
  }
}